/* styles.css */

/* General Container Styling */
.pwg-container-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
}

/* Container Styling */
.pwg-container {
     width: 100%;
     max-width: 500px;
     padding: 30px;
     background: linear-gradient(135deg, #6a0dad, #b03a2e); /* Purple gradient background */
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     color: #ffffff; /* Text color for contrast */
}

/* Form Title Styling */
.pwg-container .form-title {
     font-size: 36px;
     margin-bottom: 20px;
     text-align: center;
     color: #ffffff; /* White color for the form title */
}

/* Form Group Styling */
.pwg-container .random-password-generator-form .form-group {
     margin-bottom: 20px;
     text-align: left;
}

/* Label Styling */
.pwg-container .random-password-generator-form .form-group label {
     display: flex;
     align-items: center;
     font-weight: 600;
     margin-bottom: 8px;
     color: #ffffff; /* Label color for contrast */
}

/* Number Input Styling */
.pwg-container .random-password-generator-form .form-group input[type="number"] {
     display: inline-block;
     width: 70px; /* Adjust width for better fit */
     padding: 8px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     font-size: 20px;
}

/* Range Input Styling */
.pwg-container .random-password-generator-form .form-group input[type="range"] {
     width: calc(100% - 90px); /* Adjust width to fit the number input */
     margin-left: 10px;
}

/* Checkbox Styling */
.pwg-container .random-password-generator-form .form-group input[type="checkbox"] {
     margin-right: 10px;
     transform: scale(1.2);
}

/* Button Styling */
.pwg-container .generate-button {
     padding: 12px 18px;
     border: none;
     border-radius: 5px;
     background-color: #007bff; /* Primary Button Color */
     color: #ffffff;
     cursor: pointer;
     font-size: 16px;
     transition: background-color 0.3s ease, transform 0.2s ease;
}

.pwg-container .generate-button:hover {
     background-color: #f0f0f0; /* Light gray background on hover */
     color: #5b2d77; /* Slightly darker purple text on hover */
     border-color: #5b2d77; /* Darker purple border on hover */
     transform: scale(1.05);
}

/* Error Message Styling */
.pwg-container .error-message {
     color: #e74c3c;
     font-size: 14px;
     margin-top: 15px;
}

/* Password Display Styling */
.pwg-container .password {
     display: flex;
     align-items: center;
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     border-radius: 5px;
     padding: 12px;
     margin-top: 15px;
     font-size: 20px;
     color: #333333; /* Dark text color for readability */
     word-break: break-all;
}

/* Slider container styling */
.pwg-container .slider-container {
     display: flex;
     align-items: center;
}

/* Generated Password Styling */
.pwg-container #generated-password {
     font-weight: 600;
     margin-right: 15px;
}

/* Copy Button Styling */
.pwg-container #copy-button {
     padding: 12px 18px;
     border: 2px solid #28a745; /* Green border */
     border-radius: 5px;
     background-color: #ffffff; /* White button with dark text */
     color: #28a745; /* Green text color for the button */
     cursor: pointer;
     font-size: 16px;
     margin-top: 15px;
     transition: background-color 0.3s ease, transform 0.2s ease;
}

.pwg-container #copy-button:hover {
     background-color: #f0f0f0; /* Light gray background on hover */
     border-color: #1e7e34; /* Darker green border on hover */
     color: #1e7e34; /* Darker green text color on hover */
     transform: scale(1.05);
}